﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<button type="button" id="btnTeste">Tarefa</button>

<div id="dlgTarefa" title="Tarefa" hidden>
    <button type="button" data-bind="click: adicionar">+</button>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Descrição</th>
                <th>Dt.Inicio</th>
                <th>Dt.Fim</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: tarefas">
            <tr>
                <td data-bind="text: id"></td>
                <td style="padding:0;padding-left:5px;"><input type="text" data-bind="value: descricao" /></td>
                <td style="padding:0;padding-left:5px;"><input type="text" data-bind="value: dtInicio" data-type="date" style="width: 100px;" /></td>
                <td style="padding:0;padding-left:5px;"><input type="text" data-bind="value: dtFim" data-type="date" style="width: 100px;"/></td>
                <td style="padding:0;padding-left:5px;"><button type="button" data-bind="click: $root.salvar">Salvar</button></td>
                <td style="padding:0"><button type="button" data-bind="click: $root.remover">Remover</button></td>
            </tr>
        </tbody>
    </table>    
</div>

<script>
    function Tarefa(etapa) {
        this.etapa = etapa;
        this.id = ko.observable(0);
        this.descricao = ko.observable("xxx");
        this.dtInicio = ko.observable();
        this.dtFim = ko.observable();
    }

    function Tarefas() {
        this.tarefas = ko.observableArray([]);

        this.adicionar = function () {
            this.tarefas.push(new Tarefa(1));

            $('input[data-type="date"]').datepicker({ dateFormat: "dd/mm/yy" });
        }
        this.remover = function (tarefa) {
            alert(tarefa.descricao());
        }
        this.salvar = function (tarefa) {
            alert(tarefa.descricao());
        }
    }

    var tarefas = new Tarefas();

    ko.applyBindings(tarefas);

    $("#btnTeste").on("click", function (e) {
        $.getJSON("/api/Tarefas?etapa=1", function (data) {

            $.each(data, function (i, v) {
                var tarefa = new Tarefa(1);
                tarefa.id(v.TarefaId);
                tarefa.descricao(v.DescTarefa);

                tarefas.tarefas.push(tarefa);
            });

            $("#dlgTarefa").dialog({
                modal: true,
                height: 400,
                width: 700
            });

        });
    });
</script>

<!--
    TarefaId
    DescTarefa
    DtInicialTarefa
    DtFinalTarefa
    EtapaId
    -->